import React from 'react';
import { Card, List, Tag, Rate } from 'antd';
import { StarOutlined } from '@ant-design/icons';
import { Link } from 'react-router-dom';

const EditorChoice: React.FC = () => {
  const articles = [
    {
      id: 1,
      title: '深度解析：大语言模型的未来发展方向',
      summary: '从技术演进、应用场景、商业模式等多个维度，深入分析大语言模型的发展趋势...',
      author: 'AI研究员',
      rating: 4.8,
      tags: ['深度好文', '技术分析']
    },
    {
      id: 2,
      title: 'AI创业公司生存指南：如何在巨头夹缝中突围',
      summary: '基于大量案例分析，总结AI创业公司在当前市场环境下的生存策略和发展路径...',
      author: '创业导师',
      rating: 4.6,
      tags: ['创业指南', '市场分析']
    },
    {
      id: 3,
      title: 'AI伦理与安全：我们需要什么样的监管框架',
      summary: '探讨AI发展带来的伦理挑战，以及如何建立有效的监管机制...',
      author: '伦理专家',
      rating: 4.7,
      tags: ['伦理', '政策']
    }
  ];

  return (
    <Card 
      title={
        <span>
          <StarOutlined style={{ color: '#faad14', marginRight: 8 }} />
          编辑精选
        </span>
      }
      bordered={false}
    >
      <List
        itemLayout="vertical"
        dataSource={articles}
        renderItem={item => (
          <List.Item>
            <Card hoverable>
              <h3>
                <Link to={`/editor/${item.id}`} style={{ color: '#faad14' }}>{item.title}</Link>
              </h3>
              <p>{item.summary}</p>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <div>
                  {item.tags.map(tag => (
                    <Tag key={tag} color="gold">{tag}</Tag>
                  ))}
                </div>
                <div>
                  <Rate disabled defaultValue={item.rating} allowHalf />
                  <span style={{ marginLeft: 8 }}>{item.author}</span>
                </div>
              </div>
            </Card>
          </List.Item>
        )}
      />
    </Card>
  );
};

export default EditorChoice; 